<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
<%@ include file="/WEB-INF/views/common/includes.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title><fmt:message key="event.website.title"/></title>
		<link href="<c:url value='/static/css/estilo_efqm.css'/>" rel="stylesheet" type="text/css" />
		<link href="<c:url value='/static/css/osx.css'/>" rel="stylesheet" type="text/css" />
		<link type='text/css' href='/static/css/basic.css' rel='stylesheet' media='screen' />
		
		<style type='text/css'>
    		
    		.enlaceboton {    
    			font-family: verdana, arial, sans-serif;
   				font-size: 10pt;
   				font-weight: bold;
   				padding: 4px;
   				background-color: #afffcc;
   				color: #666666;
   				text-decoration: none;
   			}
   			
    		#mask{ 
        		position:absolute; /* important */
        		top:0px; /* start from top */
        		left:0px; /* start from left */
        		height:100%; /* cover the whole page */
        		width:100%;  /* cover the whole page */
        		display:none; /* don't show it '*/  
        		/* styling bellow */
        		background-color: black;
        		z-index:5000;
    		}
    
    		.modal_window{
        		position:absolute; /* important so we can position it on center later */		
        		display:none; /* don't show it */   
        		/* styling bellow */
        		color:white;
    		}
    
    		/* style a specific modal window  */
    		#modal_window{
        		padding:50px;
       			background-color:#000;
        		color:black;
        		background:url(/static/img/interfaz/loading.gif) no-repeat;
        		z-index:5001;
    		}
    
		</style>

		<script type="text/javascript" src="<c:url value='/static/js/google_analytics_inc.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/static/js/jquery-1.4.min.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/static/js/jquery.simplemodal.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/static/js/osx.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/static/js/basic.js'/>"></script>
	
		<script type="text/javascript">
		
			jQuery.fn.correo=function()	{
				if(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($(this).val())) {
					return true;
				} else {
					alert('<fmt:message key="vote.action.email.fail"/>');
					$(this).focus();
					return false;
				}
			}
			
			function dataCheck() {
				var maxVotes = '${maxVotes}';
				var voterEmail = $("input[name=voter]").text();
				if(!$("input[name=voter]").correo()) {
					return false;
				}	
				if($("input[name=companies]:checked").length != maxVotes) {
					alert('<fmt:message key="vote.action.votes.fail"><fmt:param value="${maxVotes}"/></fmt:message>');
					return false;
				}
				return true;
			}

			

		</script>
		
	</head>
	
	<body id="efqm" class="home">

	<!-- modal content -->
		<div id="osx-modal-content">
			<div id="osx-modal-title"><fmt:message key="vote.action.vote.modal.title"><fmt:param value="${maxVotes}"/></fmt:message></div>
			<div class="close"><a href="#" class="simplemodal-close">x</a></div>
			<div id="osx-modal-data">
				<form:form action='/vote' commandName="voteForm" method="POST" onsubmit="return dataCheck();">
                  		<form:errors path="*" cssClass="errorblock" element="div"/>
                  		Tu e-mail<br /><form:input path="voter" size="70"/><br /><br/>
                  		
                  		<table>
                  			<c:forEach items="${preselectedCompanies}" var="company">
                  				<tr>
                  					<td><input type="checkbox" name="companies" value="${company.id}" /></td>
                  					<td>&nbsp;${company.companyInfo.name}</td>
                  				</tr>
                  			</c:forEach>
                  			
                  		</table>
                  		           		
                  		
						<br /><br />
						<input type="submit" value='<fmt:message key="action.company.vote"/>' title='<fmt:message key="action.company.vote"/>' class="bt_standar"/>
                 </form:form>
			</div>
		</div>
	

		
		
	<div id="global" class="fondo_topnine">
		
		<%@ include file="/WEB-INF/views/common/header.jsp" %>
		
		<div id="efqm_content" >
		
			<h3 class="top_nine">
				<fmt:message key="home.stage2.header.1"/>
				
			</h3>
					
			<div id="conten_central">
			
              <div class="columna_left">
                <h4><fmt:message key="home.stage2.header.2"/></h4>
              </div>
              
			  <div class="conten_gen_central">
			  	 
			  	 
			  	 <p class="sub_tit_imp"> 
			  	 	<fmt:message key="home.stage2.entradilla"/>
                </p>
                
                <br/>
				
				<p style="color:#000000;font-weight:bold;">               
					<fmt:message key="home.stage2.entradilla.2"/>
				</p>
                
                <ol>
                		<li><fmt:message key="home.stage2.criteria.1"/></li>
                    <!--		
                		<li><fmt:message key="home.stage2.criteria.2"/></li>
                		-->
                		<li><fmt:message key="home.stage2.criteria.3"/></li>
                		<li><fmt:message key="home.stage2.criteria.4"/></li>
                </ol>
                
                 <p style="color:#000000;font-weight:bold;">               
					Siguientes pasos:
				</p>
				<br/>
                <p style="color:#000000">               
					<fmt:message key="home.stage2.entradilla.3"/>
				</p>
                
                <br/>
                
                <p class="menuitem submenuheader">
                	<a href='#' class='osx bt_standar'><span><fmt:message key="vote.action.vote.animate"/>!!!</span></a>
                </p>                  
				
				
			    <table class="lst_practices nine_practices" summary='<fmt:message key="home.stage2.company.table.title"/>'>
                  <caption>
                    <fmt:message key="company.list.table.title"/>
                  </caption>
			      <thead>
                    <tr>
                      <th scope="col" ><fmt:message key="company.list.table.header.company"/></th>
                      <th scope="col"><fmt:message key="company.list.table.header.video"/></th>
                      <th scope="col"><fmt:message key="company.list.table.header.goodpractice"/></th>
                    </tr>
                  </thead>
                  <tbody>
                  
                  
                  <c:forEach items="${preselectedCompanies}" var="company" varStatus="rowCounter">
                  	<tr> 
                      <td scope="row" class="first">
                      	<strong>${rowCounter.count}.</strong>${company.companyInfo.name} 
                      	<span>${company.companyInfo.city} (${company.companyInfo.country})</span> 
                      </td>
                      <td  class="second">
                        <a href="<c:url value='/company/detail/${company.id}'/>" title="${company.companyInfo.name}">
                      		<c:if test="${!empty company.videos}">
								<c:set var="video" value="${company.videos[0]}"/>	
                      			<img src="${video.thumbURL}" alt="${company.companyInfo.name}" />
                      		</c:if>
                      		<span><img src="<c:url value='/static/img/interfaz/play_naranja_mini.png'/>" alt="<fmt:message key='action.video.play'/>"> </span>
                      	</a> 
                       </td>
                      <td class="third">
                      	<p>${company.additionalInformation.title}</p>
               			<!--
                      	<a href="#" class="osx bt_standar" title="<fmt:message key='action.company.vote'/>" id="${company.id}">
                      		<span><fmt:message key="action.company.vote"/></span>
                      	</a>
                      	-->
                      </td>
                    </tr>
                  </c:forEach>					
                  
                  </tbody>
                </table>
               
			  </div>
			</div>
			
			
			
	
	
	</div>
	
	<%@ include file="/WEB-INF/views/common/footer.jsp" %>
		
	</div>
	</body>
</html>
